<template>
  <div class="mobile-page">
    <a-tabs v-model:activeKey="activeKey" size="large" @change="getOrders">
      <a-tab-pane key="1" tab="进行中"></a-tab-pane>
      <a-tab-pane key="2" tab="已完成"></a-tab-pane>
      <a-tab-pane key="3" tab="异常"></a-tab-pane>
    </a-tabs>
    <div
      class="list-wrap"
      :class="[{ empty: !orderList || !orderList.length }]"
    >
      <a-empty
        v-if="!orderList || !orderList.length"
        :imageStyle="{
          height: '200px',
        }"
        style="margin-bottom: 150px"
      />
      <template v-else>
        <a-card
          v-for="(item, idx) in orderList"
          :key="item.id"
          :title="'订单: ' + item.orderNum"
        >
          <template #extra>
            <a href="javascript:;" @click="handleDoneOrder(item)">完成</a>
          </template>
          <div>
            <span class="label">单号：</span>
            <span class="content">{{ item.orderCode }}</span>
          </div>
          <div>
            <span class="label">客户名：</span>
            <span class="content">{{ item.userName }}</span>
          </div>
          <div>
            <span class="label">联系电话：</span>
            <span class="content">{{ item.userMobile }}</span>
          </div>
          <div>
            <span class="label">客户地址：</span>
            <span class="content">{{ item.userAddress }}</span>
          </div>
          <div>
            <span class="label">商品总数：</span>
            <span class="content">{{ item.totalNum }} 件</span>
          </div>
          <div>
            <span class="label">商品总价：</span>
            <span class="content">{{ item.totalAmount }} 元</span>
          </div>
          <div>
            <span class="label">下单时间：</span>
            <span class="content">{{ item.orderTime }}</span>
          </div>
          <div>
            <span class="label">配送时间：</span>
            <span class="content">{{ item.sendTime || '立即配送' }}</span>
          </div>
        </a-card>
      </template>
    </div>
    <a-modal
      title="完成订单"
      v-model:visible="acState.removeVisible"
      :confirm-loading="acState.loading"
      @ok="doneOrder"
      width="300px"
      centered
    >
      {{ acState.modalText }}
    </a-modal>
  </div>
</template>

<script setup>
import { selectOrderByRider } from '@/api/rider'
import { done } from '@/api/order'
import { ref, onMounted } from 'vue'
import { useActions } from '@/hooks/actions'

const activeKey = ref('1')
const orderList = ref([])
const { acState, showEdit, showRemove } = useActions()
acState.modalText = '确定该订单已完成吗？'

const getOrders = async () => {
  const { status, data, msg } = await selectOrderByRider({
    status: activeKey.value,
  })
  orderList.value = data
}

const handleDoneOrder = (e) => {
  acState.removeVisible = true
  e.id && (acState.current = e)
}

const doneOrder = async (row) => {
  acState.loading = true
  const { code } = await done({ id: acState.current.id })
  if (code !== 300) retutn
  acState.loading = false
  acState.removeVisible = false
  getOrders()
}

onMounted(() => {
  getOrders()
})
</script>

<style scoped lang="less">
.mobile-page {
  display: flex;
  flex-direction: column;
  padding: 10px 0;
  height: 100vh;
}
::v-deep(.ant-tabs-nav-list) {
  width: 100%;
  .ant-tabs-tab {
    flex: 1;
    justify-content: center;
  }
}
.list-wrap {
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow: auto;
  text-align: left;
  &.empty {
    align-items: center;
    justify-content: center;
  }
}
::v-deep(.ant-card) {
  margin: 10px 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  .ant-card-body {
    display: flex;
    flex-direction: column;
  }
}
</style>
